<template>
    <div class="footer">
      <div class="footer2">
        <ul>
          <li v-for="item in data">
            <img :src="item.src" alt="">
            <span>{{item.txt}}</span>
          </li>
        </ul>
      </div>
      <div class="footer-d1">
        <div class="d1-left">
          <img src="/static/lyl/logo.png" alt="">
          <p>
            <span>服务时间：08：-22:00 <img src="/static/lyl/pone.png" alt="">400-800-8820</span>
          </p>
        </div>
        <div class="d1-center">
          <div class="d1-center2">
            <img src="/static/lyl/er1.png" alt="">
            <p>礼拜五官方微信</p>
          </div>
          <div>
            <img src="/static/lyl/er2.png" alt="">
            <p>礼拜五APP</p>
          </div>
        </div>
        <div class="d1-right">
          <ul class="ulright">
            <li @click="tiaot()" v-for="item in data2">{{item}}</li>
          </ul>
          <ul class="ulright">
            <li @click="tiaot()" v-for="item in data3">{{item}}</li>
          </ul>
          <ul class="ulright">
            <li @click="tiaot()" v-for="item in data4">{{item}}</li>
          </ul>
          <ul class="ulright">
            <li @click="tiaot()" v-for="item in data5">{{item}}</li>
          </ul>
        </div>
      </div>
      <div class="footer3">
        <p>版权所有 © 礼拜五  保留所有权利 | 沪ICP备12042163 </p>
        <p>礼拜五  纵享品质 </p>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Footer",
      data(){
        return {
          data:[
            {src:'/static/lyl/f1.png',txt:'优鲜保障'},
            {src:'/static/lyl/f2.png',txt:'全程监控'},
            {src:'/static/lyl/f3.png',txt:'礼拜五特惠'},
            {src:'/static/lyl/f4.png',txt:'基地直供'},
            {src:'/static/lyl/f5.png',txt:'准时送达'},
          ],
          data2:['关于礼拜五','新用户注册','在线下单','支付方式'],
          data3:['配送说明','运费说明','配送方式','发票说明'],
          data4:['售后服务','退换货说明','服务保障承诺','验货与签收'],
          data5:['加盟礼拜五','加盟条款','公司简介','服务协议'],
        }
      },
      methods:{
        tiaot(){
          this.$router.push('/xyhzc')
        }
      }
    }
</script>

<style scoped>
   .footer{
     width: 100%;
     border-top: 1px solid #ddd;
   }
   .footer .footer2{
     border-bottom: 1px solid #ddd;
   }
   .footer .footer2>ul{
     padding: 20px 0;
     width: 1280px;
     margin: auto;
     display: flex;
   }
   .footer .footer2>ul li{
     width: 20%;
     line-height: 44px;
     padding: 0 35px;
     border-right: 1px solid #ddd;
     display: flex;
     justify-content: space-between;
   }
   .footer .footer2>ul li:nth-child(5){
     border-right:0;
   }
   .footer .footer2>ul li img{
     width: 44px;
     vertical-align: bottom;
   }
   .footer .footer2>ul li span{
     font-size: 24px;
   }

   .footer-d1{
     width: 1280px;
     margin: auto;
     display: flex;
     justify-content: space-around;
     padding: 17px 0;
   }
   .footer-d1 .d1-left>img{
     width: 370px;
   }
   .footer-d1 .d1-left>p{
     font-size: 18px;
     margin: 40px 0;
   }
   .footer-d1 .d1-left>p img{
     margin: 0 6px 0 20px;
   }
   .footer-d1 .d1-center{
     display: flex;
     text-align: center;
   }
   .footer-d1 .d1-center .d1-center2{
     margin-right: 40px;
   }
   .footer-d1 .d1-center img{
     width: 130px;
     cursor: pointer;
     transition: all 1s;
   }
   .footer-d1 .d1-center img:hover{
     transform: scale(2) rotateZ(360deg);
   }
   .footer-d1 .d1-center p{
     font-size: 16px;
     margin-top: 15px;
   }
   .footer-d1 .d1-right{
     display: flex;
   }
   .footer-d1 .d1-right .ulright{
     margin-right: 50px;
   }
   .footer-d1 .d1-right .ulright:nth-child(4){
     margin-right: 0;
   }
   .footer-d1 .d1-right .ulright li{
     font-size: 14px;
     line-height: 30px;
     color: #999;
   }
   .footer-d1 .d1-right .ulright li:nth-child(1){
     font-size: 16px;
     line-height: 30px;
     color: #000;
   }
   .footer-d1 .d1-right .ulright li:hover{
     color: #0f0;
     cursor: pointer;
   }
   .footer-d1 .d1-right .ulright li:nth-child(1):hover{
     color: red;
   }
   .footer3{
     width: 100%;
     border-top: 1px solid #ddd;
     text-align: center;
   }
   .footer3 p{
     font-size: 14px;
     line-height: 30px;
   }
   .footer3 p:nth-child(2){
     color: #f08200;
   }
   .footer3 p:hover{
     color: #0f0;
     cursor: pointer;
   }
</style>
